<template>
  <a-modal v-model:visible="visible" :closable="false" :footer="null" :maskClosable="false">
    <a-form :model="taskEntity" :hideRequiredMark="true" ref="formref" @finish="onSubmit">
      <a-form-item label="名称: " name="name" :rules="[{ required: true, message: '请输入名称!' }]">
        <a-input v-model:value="taskEntity.name" placeholder="名称" :rows="4"/>
      </a-form-item>
      <a-form-item label="指标: " name="quota" :rules="[{ required: true, message: '请输入指标!' }]">
        <a-input-number v-model:value="taskEntity.quota" :min="1" :max="10" :defaultValue="3"/>
      </a-form-item>
      <a-form-item label="奖励积分: " name="score" :rules="[{ required: true, message: '请输入奖励数额!' }]">
        <a-input-number v-model:value="taskEntity.score" :min="1" :max="10" :defaultValue="3"/>
      </a-form-item>
      <a-form-item label="类型: " name="type" :rules="[{ required: true, message: '请输入类型!' }]">
        <a-select v-model:value="taskEntity.type">
          <a-select-option v-for="(item,index) in taskTypeList" :key="index" :value="item.value">{{ item.value }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="开始日期: " name="stime">
        <a-date-picker v-model:value="taskEntity.stime"/>
      </a-form-item>
      <a-form-item label="结束日期: " name="etime">
        <a-date-picker v-model:value="taskEntity.etime"/>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" html-type="submit">确认</a-button>
        <a-button style="margin-left: 10px" @click="onCancel">取消</a-button>
      </a-form-item>
    </a-form>
  </a-modal>

  <div style="padding: 22px 10px 10px">
    <h4 class="title">用户管理</h4>
    <div>
      <a-button @click="showModal">发布新任务</a-button>
    </div>
    <a-table
        :columns="columns"
        :data-source="taskList"
        :pagination="false"
    >
    </a-table>
  </div>
</template>
<script>
import {ref, reactive} from "vue";
import {get, put, post, tip, del} from "@/common";
import {message} from 'ant-design-vue';

export default {
  setup() {
    const columns = [
      {
        title: '名称',
        dataIndex: 'name',
        width: '20%',

      },
      {
        title: '创建人',
        dataIndex: 'createName',
        width: '10%',
      },
      {
        title: '创建时间',
        dataIndex: 'time',
        width: '8%',
      },
      {
        title: '开始时间',
        dataIndex: 'stime',
        width: '8%',
      },
      {
        title: '结束时间',
        dataIndex: 'etime',
        width: '8%',
      },
      {
        title: '指标',
        dataIndex: 'quota',
        width: '5%',
      },
      {
        title: '奖励数额',
        dataIndex: 'score',
        width: '8%',
      }];

    const taskList = ref({});

    const visible = ref(false);

    const taskTypeList = ref([]);

    const taskEntity = reactive({
      name: '',
      quota: '',
      type: '',
      stime: '',
      etime: '',
      score: '',
    });

    const formref = ref();

    const getTaskList = () => {
      get("/score/task/taskList").then((res) => {
        taskList.value = res.data;
      });
    };
    getTaskList();

    const getTaskTypeList = () => {
      get("/score/task/typeList").then((res) => {
        const temps = [];
        for (let i = 0; i < res.data.length; i++) {
          const temp = {value: "", label: ""};
          temp.value = res.data[i];
          temp.label = res.data[i];
          temps.push(temp);
          console.log(res.data[i]);
        }
        taskTypeList.value = temps;
        console.log(taskTypeList.value)
      });
    };

    const showModal = () => {
      visible.value = true;
      getTaskTypeList();
    };

    const onSubmit = () => {
      post("/score//task/create", taskEntity).then((res) => {
        message.success("创建成功!");
        onCancel();
        getTaskList();
      })
    };

    const onCancel = () => {
      formref.value.resetFields();
      visible.value = false;
    };


    return {
      columns,
      taskList,
      visible,
      taskEntity,
      taskTypeList,
      formref,
      showModal,
      onCancel,
      onSubmit
    };
  },

}
</script>
<style>
.title {
  font-size: 22px;
  border-left: 3px solid rgba(0, 0, 0, 0.8);
  padding-left: 8px;
  line-height: 16px;
  margin-bottom: 15px;
  font-weight: normal;
  margin-top: 10px;
  text-align: left;
}
</style>